{extend name="default/template/base_index" /}


{block name="area_header"}

	<link type="text/css" rel="stylesheet" href="__CDN__/comp/wxuploader.css?v=__APP_VERSION__" />
	<link type="text/css" rel="stylesheet" href="__CDN__/jquery-uploadify/3.2.1/uploadify.css" />
	<link rel="stylesheet" type="text/css" media="all" href="__CDN__/jquery-datetimepicker/jquery.datetimepicker.css">
	<script type="text/javascript" src="__CDN__/jquery-datetimepicker/jquery.datetimepicker.js"></script>
	<style type="text/css">
		.banner.wxuploaderimg .img-preview img{
			width:320px;
			height:150px;
		}
	</style>
	
	<link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/select2.min.css" />
	<style type="text/css">
		.select2-container--default .select2-selection--single .select2-selection__placeholder{
	color:#E7E7E7;
}
.select2-container--default .select2-selection--single {
  background-color: #2780e3;
  border: 0px solid #aaa;
  border-radius: 4px;
}
.select2-container{
  background: #2780e3;
  color: #fff;
  padding: 2px;
  margin: 0px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #F5F5F5;
  }
  .select2-container--default .select2-search--dropdown .select2-search__field{
  	color:#444;
  }
		
  	.wxnumber-item{
  		  background: #DFC2C2;
		  width: auto;
		  display: inline-block;
		  padding: 5px;
		  margin: 5px;
  	}
  	.wxnumber-item i.fa{
  		margin: 0px 5px;
  		cursor: pointer;
  	}
  	
		.tangram-suggestion-main{
			z-index: 123456789;	
		}
	</style>
{/block}

{block name="area_body"}
	{include file="default/Widget/topbar" /}
	<div class="admin-main container-fluid">
		{include file="default/Widget/left" /}
		<div class="admin-main-content">
			{include file="default/Widget/breadcrumb" /}
		
			<!-- 带验证 form -->
			<form class="form-horizontal well validateForm" >
				<input  type="hidden" name="id" value="{$store.id}" />
				<fieldset>
					<legend>
						创建店铺</legend>
					<div class="form-group">
						<label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺名称</label>
						<div class="col-md-10 col-lg-10">
							<input type="text" class="required form-control input-short input-sm" value="{$store.name}" name="name" id="inputtitle" placeholder="请输入店铺名称">
							<div class="help-block">(店铺名称)</div>
						</div>
					</div>
					<div class="form-group hide">
						<label for="inputservice_phone" class="col-md-2 col-lg-2 control-label">店铺主微信号：</label>
						<div class="col-md-10 col-lg-10">
							<input type="text" class="required form-control input-short input-sm" name="wxno" value="{$store.wxno}" id="" placeholder="请输入店铺主微信号">
							<div class="help-block">(请输入店铺微信号，可在微信的个人中心查看)</div>
						</div>
					</div>
					<div class="form-group">
						<label for="inputservice_phone" class="col-md-2 col-lg-2 control-label">客服电话</label>
						<div class="col-md-10 col-lg-10">
							<input type="text" class="required form-control input-short input-sm" value="{$store.service_phone}" name="service_phone" id="inputservice_phone" placeholder="请输入客服电话">
							<div class="help-block">(请输入客服电话)</div>
						</div>
					</div>

					<div class="form-group">
						<label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺logo</label>
						<div class="col-md-10 col-lg-10">
							<input type="hidden" class="required form-control input-short input-sm" name="logo" id="inputlogo" placeholder="请输入店铺logo、头像。">
							<div class="wxuploaderimg clearfix logo {notempty name="store.logo"}checked{/notempty}"  data-maxitems="1">
								<div class="img-preview clearfix" >
									{notempty name="store.logo"}
											<div class="pull-left clearfix img-item">
												<img src="{:getImgUrl($store['logo'])}"  data-imageid="{$store.logo}" />
												<div class="edit_pic_wrp"><a href="javascript:;" class="fa fa-lg fa-trash js_delete"></a></div>
											</div>
									{/notempty}
								</div>
								<div class="add">
									<i class="fa fa-plus"></i>
								</div>
							</div>
							<div class="help-block">(请上传店铺logo或头像,建议尺寸：120像素 * 120像素,,50KB以下)</div>
						</div>

					
					
					<div class="form-group baidumap_position">
						<label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺经纬度</label>
						<div class="col-md-10 col-lg-10">
							经度 <input type="text" value="{$store.lng}" name="lng" class="lng" /> 纬度 <input type="text" value="{$store.lat}" name="lat" class="lat"  />
							<button type="button" class="js_baidumap btn btn-primary btn-sm" data-toggle="modal" data-target="#baidumap" >点击选择百度地图</button>
						</div>
					</div>
					
					
					<div class="form-group">
						<label for="inputtitle" class="col-md-2 col-lg-2 control-label">店铺简介</label>
						<div class="col-md-10 col-lg-10">
							<textarea name="notes" class="form-control" rows="5">{$store.notes}</textarea>
							<div class="help-block">(您可以输入店铺简介)</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 col-lg-2 control-label">&nbsp;</label>
						<div class="col-lg-10 col-md-10">
							<a target-form="validateForm" class="ajax-post btn btn-primary" onclick="return getData();" href="{:url('Store/edit')}" autofocus="autofocus"><i class="fa fa-save"></i> {:L('BTN_SAVE')}</a>
							<a class="btn btn-default" href="{:url('Store/index')}"><i class="fa fa-times-circle"></i> {:L('BTN_CANCEL')}</a>
						</div>
					</div>
				</fieldset>
			</form>
			<!-- form -->
			
			<script type="text/javascript" src="__CDN__/select2/4.0.0/js/select2.min.js"></script>
			<script type="text/javascript" src="__CDN__/select2/4.0.0/js/i18n/zh-CN.js"></script>
			<script type="text/javascript" src="__CDN__/jquery-uploadify/3.2.1/jquery.uploadify.min.js"></script>
			{include file="default/template/wxpicture" /}
			{include file="default/template/baidumap" /}
		</div>
		<!-- END admin-main-content -->
	</div>
		<!-- END admin-main-->
{/block}

{block name="area_footer"}
	
    <!--<script type="text/javascript" charset="utf-8" src="__CDN__/ueditor/1.4.3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__CDN__/ueditor/1.4.3/ueditor.all.min.js"> </script>-->
<script type="text/javascript">
	$('.startdatetime').datetimepicker({
		lang: 'ch',
		format:'Y-m-d H:i:s',
		timepicker:false,
	});
	$('.enddatetime').datetimepicker({
		lang: 'ch',
		format:'Y-m-d  H:i:s',
		timepicker:false,
	});
</script>
<script type="text/javascript">
	
	function getData(){
		var logo = $(".wxuploaderimg.logo img").attr("data-imageid");
		var banner = $(".wxuploaderimg.banner img").attr("data-imageid");
		
		$("#inputlogo").val(logo);
		$("#inputbanner").val(banner);
		
		$("#inputweixin_number_name").val("");
		$(".js_weixin_number_list .wxnumber-item").each(function(index,item){
			var text = "";
			$("#inputweixin_number_name").val($("#inputweixin_number_name").val()+$(item).text()+",");
			
		});
		
		
		return true;		
	}
	
	function appendWeixinNumber(weixin,openid){
		var len = $("#inputweixin_number").val().split(",").length - 1;
		
		if(len > 5){
			$.scojs_message("不能超过5个！",$.scojs_message.TYPE_ERROR);
			return ;
		}
		
		$("#inputweixin_number").val($("#inputweixin_number").val()+openid+",");
		
//		console.log(weixin);
		$cont = $(".js_weixin_number_list");
		$item = $("<div class='wxnumber-item'>"+weixin+"<i class='fa fa-times js_removed'></i></div>");
		$cont.append($item);
		$item.attr("data-id",openid);	
	}
	
	function removeWeixinNumber(ele){
//		console.log(ele);
		var str = $("#inputweixin_number").val();
		var openid = ele.attr("data-id");
		$("#inputweixin_number").val(str.replace(openid+",",""));
		ele.remove();		
		$cont = $(".js_weixin_number_list");
		
	}
	
	
	
	$(function(){
		
		$(".js_weixin_number_list").click(function(ev){
			$ele = $(ev.target);
			if($ele.hasClass("js_removed")){
				removeWeixinNumber($ele.parent());
			}
		});
		
		wxuploadimg.init({cont:".wxuploaderimg"});
		
		//百度地图-坐标选择
		$(".baidumap_position").baidumap();
		$("#user_select2").select2({
			placeholder: "可以输入用户id或昵称查询"	,
			language: "zh-CN",
			ajax: {
			    url: "{:url('Wxuser/select')}",
			    dataType: 'json',
			    delay: 250,
			    data: function (params) {
			    	var queryParameters = {
				      q: params.term
				    }
    				return queryParameters;
			      
			    },
			    processResults: function (data, page) {
			    	if(!data.info){
			    		data.info = new Array();
			    		data.info['nodata']="无相关数据";
			    	}
			      	return {
			        	results: data.info
			      	};
			    },
			    cache: true
		  	}, 
			  	minimumInputLength: 0,
				templateSelection: function (repo) {
					var selection = repo.nickname || repo.text;
					if(repo.nickname){
						var openid = repo.openid;
						console.log(repo);
						if($("#inputweixin_number").val().indexOf(openid) === -1){
							appendWeixinNumber(selection,openid);
						}
						
					}
	  				return selection;
				},
			  templateResult: function (repo) {
			   		
      				if (repo.loading) return repo.text;
					if(repo.nodata) return repo.nodata;

      				var markup = '<div><img src="'+repo.avatar+'" style="width:30px;height:30px;"/>[id:'+repo.id+'] '+repo.nickname+'</div>';
      				return markup;
    			},
		});
		
	})
</script>
{/block}
